import React, { Component } from 'react'
import { StyleSheet, View, Text, Button, TouchableOpacity } from 'react-native'
import actions from '../action'
import { connect } from 'react-redux'
import Feather from 'react-native-vector-icons/Feather'
import Ionicons from 'react-native-vector-icons/Ionicons'
import NavigationBar from '../common/NavigationBar'
import NavigationUtil from '../navigator/NavigationUtil'

const THEME_COLOR = '#678'

class MyPage extends Component {
	//右侧按钮
	getRightButton() {
		return (
			<View style={{ flexDirection: 'row' }}>
				<TouchableOpacity />
				<View style={{ padding: 5, marginRight: 8 }}>
					<Feather
						name={'search'}
						size={24}
						style={{ color: '#ffffff' }}
					/>
				</View>
			</View>
		)
	}

	//左侧按钮
	getLeftButton(callback) {
		return (
			<TouchableOpacity
				style={{ padding: 8, paddingLeft: 12 }}
				onPress={callback}
			>
				<Ionicons
					name={'ios-arrow-back'}
					size={26}
					style={{ color: '#ffffff' }}
				/>
			</TouchableOpacity>
		)
	}

	render() {
		//导航栏
		let statusBar = {
			backgroundColor: THEME_COLOR,
			barStyle: 'light-content'
		}
		let navigationBar = (
			<NavigationBar
				title={'我的'}
				statusBar={statusBar}
				style={{ backgroundColor: THEME_COLOR }}
				rightButton={this.getRightButton()}
				leftButton={this.getLeftButton()}
			/>
		)

		return (
			<View style={styles.container}>
				{navigationBar}
				<Text style={styles.welcome}>MyPage</Text>
				<Button
					title={'go to Fetch'}
					onPress={() => {
						NavigationUtil.goPage({}, 'FetchDemoPage')
					}}
				/>
				<Button
					title={'go to AsyncStorage'}
					onPress={() => {
						NavigationUtil.goPage({}, 'AsyncStorageDemoPage')
					}}
				/>
				<Button
					title={'离线缓存框架'}
					onPress={() => {
						NavigationUtil.goPage({}, 'DataStoreDemoPage')
					}}
				/>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		marginTop: 30
	},
	welcome: {
		fontSize: 16
	}
})

const mapStateToProps = () => ({})

const mapDispatchToProps = dispath => ({
	onThemeChange: theme => dispath(actions.onThemeChange(theme))
})

//非常关键的一步
export default connect(
	mapStateToProps,
	mapDispatchToProps
)(MyPage)
